/**
 * Element Plus 小清新风格主题
 *
 * 基于 rgba(99, 102, 241, 0.1) 设计的小清新风格主题
 * 遵循 Element Plus 官方设计标准
 *
 * @author ZAPI Team
 * @version 3.0.0
 */

/**
 * 颜色级别生成器
 * 根据 Element Plus 官方规范生成颜色变体
 */
 @mixin set-color-levels($type, $color) {
  --el-color-#{$type}: #{$color};
  
  /* light-3: 用于按钮悬停状态，混入 10% 白色，只比原色稍微亮一点点 */
  --el-color-#{$type}-light-3: mix(#fff, $color, 10%);
  
  /* light-5: 用于禁用状态和点击反馈，混入 45% 白色 */
  --el-color-#{$type}-light-5: mix(#fff, $color, 20%);
  
  /* light-7: 用于边框和分割线，混入 70% 白色 */
  --el-color-#{$type}-light-7: mix(#fff, $color, 70%);
  
  /* light-9: 用于朴素按钮、Tag 背景等，混入 90% 白色，营造小清新感 */
  --el-color-#{$type}-light-9: mix(#fff, $color, 90%);
  
  /* dark-2: 用于按下状态，混入 8% 黑色，保持柔和 */
  --el-color-#{$type}-dark-2: mix(#000, $color, 8%);
}

/* ==============================================
   小清新风格主题变量定义
   ============================================== */
:root {
  // 主色调：基于 rgba(99, 102, 241, 0.1) 的完整色值
  // 主色使用稍微柔和的靛蓝色，符合小清新风格
  $primary: #818cf8; // 柔和的靛蓝色，比 #6366f1 更柔和
  
  // 辅助色：小清新风格的柔和配色
  $success: #34d399; // 清新的薄荷绿
  $warning: #fbbf24; // 柔和的琥珀色
  $danger:  #fb7185; // 柔和的玫瑰粉
  $info:    #94a3b8; // 淡雅的蓝灰色

  // 生成所有颜色级别
  @include set-color-levels('primary', $primary);
  @include set-color-levels('success', $success);
  @include set-color-levels('warning', $warning);
  @include set-color-levels('danger', $danger);
  @include set-color-levels('info', $info);

  // ==================== 按钮样式 ====================
  // 按钮悬停效果：使用稍微亮一点但仍有足够对比度的颜色
  // 使用固定颜色值，确保在白色背景上有足够的对比度
  --el-button-hover-bg-color: #8b9aff; // 比主色 #818cf8 稍微亮一点，但保持足够的对比度
  --el-button-hover-border-color: #8b9aff;
  --el-button-active-bg-color: var(--el-color-primary-dark-2);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
  
  // 按钮禁用状态：使用实色背景，确保可见
  --el-button-disabled-bg-color: #f1f5f9;
  --el-button-disabled-border-color: #e2e8f0;
  --el-button-disabled-text-color: #cbd5e1;
  
  // 按钮圆角：更大的圆角营造小清新感
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 20px;
  --el-border-radius-circle: 100%;

  // ==================== 背景颜色 ====================
  // 页面背景：使用淡紫色调，呼应主色
  --el-bg-color-page: #fafbff; // 极淡的紫色背景
  
  // 组件背景：纯白色，保持清新
  --el-bg-color: #ffffff;
  --el-bg-color-overlay: rgba(255, 255, 255, 0.95); // 半透明覆盖层
  
  // ==================== 文本颜色 ====================
  // 文本颜色：使用柔和的灰色系，保持可读性
  --el-text-color-primary: #1e293b;      // 主要文本：深灰蓝
  --el-text-color-regular: #475569;      // 常规文本：中性灰
  --el-text-color-secondary: #64748b;    // 次要文本：淡灰蓝
  --el-text-color-placeholder: #94a3b8;  // 占位符：更淡的灰
  --el-text-color-disabled: #cbd5e1;     // 禁用文本：极淡灰
  
  // ==================== 边框颜色 ====================
  // 边框颜色：使用极淡的紫色调，呼应主题
  --el-border-color: rgba(99, 102, 241, 0.15);        // 基础边框：淡紫色
  --el-border-color-light: rgba(99, 102, 241, 0.12);  // 浅色边框
  --el-border-color-lighter: rgba(99, 102, 241, 0.08); // 更浅边框
  --el-border-color-extra-light: rgba(99, 102, 241, 0.05); // 极浅边框
  --el-border-color-dark: rgba(99, 102, 241, 0.25);   // 深色边框
  --el-border-color-darker: rgba(99, 102, 241, 0.35); // 更深边框
  
  // ==================== 填充颜色 ====================
  // 填充颜色：使用淡紫色调，营造小清新氛围
  --el-fill-color: rgba(99, 102, 241, 0.08);          // 基础填充
  --el-fill-color-light: rgba(99, 102, 241, 0.06);    // 浅色填充
  --el-fill-color-lighter: rgba(99, 102, 241, 0.04);  // 更浅填充
  --el-fill-color-extra-light: rgba(99, 102, 241, 0.02); // 极浅填充
  --el-fill-color-dark: rgba(99, 102, 241, 0.12);     // 深色填充
  --el-fill-color-darker: rgba(99, 102, 241, 0.18);   // 更深填充
  --el-fill-color-blank: #ffffff;                      // 空白填充
  
  // ==================== 阴影效果 ====================
  // 阴影：使用极淡的紫色调阴影，营造轻盈感
  --el-box-shadow: 
    0 2px 8px -2px rgba(99, 102, 241, 0.08),
    0 4px 12px -4px rgba(99, 102, 241, 0.06);
  
  --el-box-shadow-light: 
    0 0 12px rgba(99, 102, 241, 0.08);
  
  --el-box-shadow-lighter: 
    0 0 6px rgba(99, 102, 241, 0.04);
  
  --el-box-shadow-dark: 
    0 4px 16px -4px rgba(99, 102, 241, 0.12),
    0 2px 8px -2px rgba(99, 102, 241, 0.08);
  
  // ==================== 组件特定样式 ====================
  
  // 输入框焦点边框
  --el-input-focus-border-color: var(--el-color-primary);
  
  // 链接颜色
  --el-link-text-color: var(--el-color-primary);
  --el-link-hover-text-color: var(--el-color-primary-light-3);
  
  // 菜单激活背景
  --el-menu-active-color: var(--el-color-primary);
  --el-menu-hover-bg-color: rgba(99, 102, 241, 0.08);
  
  // 表格样式
  --el-table-border-color: rgba(99, 102, 241, 0.1);
  --el-table-header-bg-color: rgba(99, 102, 241, 0.04);
  --el-table-row-hover-bg-color: rgba(99, 102, 241, 0.06);
  
  // 标签页样式
  --el-tabs-header-active-color: var(--el-color-primary);
  --el-tabs-header-hover-color: var(--el-color-primary-light-3);
  
  // 对话框遮罩
  --el-overlay-color: rgba(0, 0, 0, 0.3);
  --el-overlay-color-light: rgba(0, 0, 0, 0.2);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.1);
  
  // 消息提示
  --el-message-bg-color: rgba(255, 255, 255, 0.95);
  --el-message-border-color: rgba(99, 102, 241, 0.2);
  
  // 加载动画颜色
  --el-loading-spinner-color: var(--el-color-primary);
  
  // 禁用状态：使用实色背景，确保可见
  --el-disabled-bg-color: #f1f5f9;
  --el-disabled-text-color: #cbd5e1;
  --el-disabled-border-color: #e2e8f0;
}




// ==================== 小清新风格组件样式增强 ====================

// 按钮样式优化：更柔和的圆角和过渡效果
.el-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  
  // 主要按钮 hover 状态：使用稍微亮一点但保持对比度的颜色
  &.el-button--primary {
    &:hover:not(.is-disabled) {
      background-color: #8b9aff !important; // 比主色稍微亮一点，但保持对比度
      border-color: #8b9aff !important;
    }
  }
  
  // 其他类型按钮的 hover 状态：使用稍微亮一点的颜色
  &.el-button--success:hover:not(.is-disabled) {
    background-color: #4ade80 !important; // 比 success 色稍微亮一点
    border-color: #4ade80 !important;
  }
  
  &.el-button--warning:hover:not(.is-disabled) {
    background-color: #fcd34d !important; // 比 warning 色稍微亮一点
    border-color: #fcd34d !important;
  }
  
  &.el-button--danger:hover:not(.is-disabled) {
    background-color: #fb8fa3 !important; // 比 danger 色稍微亮一点
    border-color: #fb8fa3 !important;
  }
  
  &.el-button--info:hover:not(.is-disabled) {
    background-color: #a8b8d0 !important; // 比 info 色稍微亮一点
    border-color: #a8b8d0 !important;
  }
  
  // Link 按钮样式：hover 时只有文字变色，没有背景色
  &.el-button--text,
  &.is-link {
    background-color: transparent !important;
    border-color: transparent !important;
    
    &:hover:not(.is-disabled) {
      background-color: transparent !important;
      border-color: transparent !important;
      // 只改变文字颜色
      color: var(--el-color-primary-light-3) !important;
    }
    
    // 不同类型的 link 按钮 hover 颜色
    &.el-button--primary:hover:not(.is-disabled) {
      color: #8b9aff !important;
    }
    
    &.el-button--success:hover:not(.is-disabled) {
      color: #4ade80 !important;
    }
    
    &.el-button--warning:hover:not(.is-disabled) {
      color: #fcd34d !important;
    }
    
    &.el-button--danger:hover:not(.is-disabled) {
      color: #fb8fa3 !important;
    }
    
    &.el-button--info:hover:not(.is-disabled) {
      color: #a8b8d0 !important;
    }
  }
  
  // 朴素按钮样式
  &.is-plain {
    border-color: rgba(99, 102, 241, 0.2);
  }
  
  // 禁用状态：使用实色背景
  &.is-disabled {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #cbd5e1 !important;
    
    &.is-plain {
      background-color: transparent !important;
      border-color: #e2e8f0 !important;
      color: #cbd5e1 !important;
    }
  }
  
  &.is-round {
    border-radius: 20px;
  }
  
}

// 输入框样式优化：更柔和的焦点效果
.el-input__wrapper {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  
  &.is-focus {
    box-shadow: 0 0 0 1px var(--el-color-primary) inset,
                0 0 0 3px rgba(99, 102, 241, 0.1);
  }
}

// 卡片样式：更柔和的阴影和圆角
.el-card {
  border-radius: 12px;
  border-color: rgba(99, 102, 241, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    box-shadow: var(--el-box-shadow-light);
  }
}

// 标签样式：更柔和的背景色
.el-tag {
  border-radius: 6px;
  border-color: rgba(99, 102, 241, 0.2);
  background-color: rgba(99, 102, 241, 0.08);
  transition: all 0.2s ease;
  
  &:hover {
    background-color: rgba(99, 102, 241, 0.12);
  }
}

// 表格样式：更柔和的斑马纹和悬停效果
.el-table {
  border-radius: 8px;
  overflow: hidden;
  
  .el-table__row {
    transition: background-color 0.2s ease;
    
    &:hover {
      background-color: rgba(99, 102, 241, 0.04) !important;
    }
  }
  
  &.el-table--striped .el-table__body tr.el-table__row--striped {
    background-color: rgba(99, 102, 241, 0.02);
  }
  
  // ==================== 固定列背景色修复 ====================
  // 左侧固定列
  .el-table__fixed {
    background-color: var(--el-bg-color) !important;
    
    // 固定列头部
    .el-table__fixed-header-wrapper {
      background-color: var(--el-bg-color) !important;
      
      .el-table__header {
        background-color: var(--el-bg-color) !important;
        
        th {
          background-color: var(--el-bg-color) !important;
        }
      }
    }
    
    // 固定列主体
    .el-table__fixed-body-wrapper {
      background-color: var(--el-bg-color) !important;
      
      .el-table__body {
        background-color: var(--el-bg-color) !important;
        
        tr {
          background-color: var(--el-bg-color) !important;
          
          // 每一行的所有 td 都设置背景色
          td {
            background-color: var(--el-bg-color) !important;
          }
          
          // hover 状态：行和所有 td 都要有背景色（使用实色）
          &:hover {
            background-color: #f8f9ff !important;
            
            td {
              background-color: #f8f9ff !important;
            }
          }
        }
        
        // 斑马纹行：行和所有 td 都要有背景色（使用实色）
        tr.el-table__row--striped {
          background-color: #fafbff !important;
          
          td {
            background-color: #fafbff !important;
          }
          
          // 斑马纹行的 hover 状态（使用实色）
          &:hover {
            background-color: #f8f9ff !important;
            
            td {
              background-color: #f8f9ff !important;
            }
          }
        }
      }
    }
    
    // 固定列底部（如果有）
    .el-table__fixed-footer-wrapper {
      background-color: var(--el-bg-color) !important;
      
      .el-table__footer {
        background-color: var(--el-bg-color) !important;
        
        td {
          background-color: var(--el-bg-color) !important;
        }
      }
    }
  }
  
  // 右侧固定列
  .el-table__fixed-right {
    background-color: var(--el-bg-color) !important;
    
    // 固定列头部
    .el-table__fixed-header-wrapper {
      background-color: var(--el-bg-color) !important;
      
      .el-table__header {
        background-color: var(--el-bg-color) !important;
        
        th {
          background-color: var(--el-bg-color) !important;
        }
      }
    }
    
    // 固定列主体
    .el-table__fixed-body-wrapper {
      background-color: var(--el-bg-color) !important;
      
      .el-table__body {
        background-color: var(--el-bg-color) !important;
        
        tr {
          background-color: var(--el-bg-color) !important;
          
          // 每一行的所有 td 都设置背景色
          td {
            background-color: var(--el-bg-color) !important;
          }
          
          // hover 状态：行和所有 td 都要有背景色（使用实色）
          &:hover {
            background-color: #f8f9ff !important;
            
            td {
              background-color: #f8f9ff !important;
            }
          }
        }
        
        // 斑马纹行：行和所有 td 都要有背景色（使用实色）
        tr.el-table__row--striped {
          background-color: #fafbff !important;
          
          td {
            background-color: #fafbff !important;
          }
          
          // 斑马纹行的 hover 状态（使用实色）
          &:hover {
            background-color: #f8f9ff !important;
            
            td {
              background-color: #f8f9ff !important;
            }
          }
        }
      }
    }
    
    // 固定列底部（如果有）
    .el-table__fixed-footer-wrapper {
      background-color: var(--el-bg-color) !important;
      
      .el-table__footer {
        background-color: var(--el-bg-color) !important;
        
        td {
          background-color: var(--el-bg-color) !important;
        }
      }
    }
  }
  
  // 确保固定列有足够的 z-index 和阴影来遮住滚动内容
  .el-table__fixed,
  .el-table__fixed-right {
    z-index: 10;
    box-shadow: 2px 0 8px -2px rgba(99, 102, 241, 0.1);
    
    &.el-table__fixed-right {
      box-shadow: -2px 0 8px -2px rgba(99, 102, 241, 0.1);
    }
  }
  
  // 全局固定列单元格样式，确保所有情况下都有背景色
  // 使用更具体的选择器覆盖 Element Plus 默认样式
  .el-table__fixed,
  .el-table__fixed-right {
    // 基础单元格背景色
    .el-table__cell {
      background-color: var(--el-bg-color) !important;
      background: var(--el-bg-color) !important;
    }
    
    // 行中的单元格
    .el-table__row .el-table__cell {
      background-color: var(--el-bg-color) !important;
      background: var(--el-bg-color) !important;
    }
    
    // hover 状态的单元格（使用实色）
    .el-table__row:hover .el-table__cell {
      background-color: #f8f9ff !important;
      background: #f8f9ff !important;
    }
    
    // 斑马纹行的单元格 - 使用更具体的选择器覆盖 Element Plus 默认样式（使用实色）
    .el-table__body tr.el-table__row--striped td.el-table__cell {
      background-color: #fafbff !important;
      background: #fafbff !important;
    }
    
    .el-table__row.el-table__row--striped .el-table__cell {
      background-color: #fafbff !important;
      background: #fafbff !important;
    }
    
    // 斑马纹行 hover 状态的单元格（使用实色）
    .el-table__body tr.el-table__row--striped:hover td.el-table__cell {
      background-color: #f8f9ff !important;
      background: #f8f9ff !important;
    }
    
    .el-table__row.el-table__row--striped:hover .el-table__cell {
      background-color: #f8f9ff !important;
      background: #f8f9ff !important;
    }
  }
  
  // 针对带斑马纹的表格，确保固定列样式优先级更高
  &.el-table--striped {
    .el-table__fixed,
    .el-table__fixed-right {
      // 覆盖斑马纹样式，使用更具体的选择器（使用实色）
      .el-table__body tr.el-table__row--striped td.el-table__cell {
        background-color: #fafbff !important;
        background: #fafbff !important;
      }
      
      .el-table__body tr.el-table__row--striped:hover td.el-table__cell {
        background-color: #f8f9ff !important;
        background: #f8f9ff !important;
      }
      
      // 普通行的单元格
      .el-table__body tr:not(.el-table__row--striped) td.el-table__cell {
        background-color: var(--el-bg-color) !important;
        background: var(--el-bg-color) !important;
      }
      
      .el-table__body tr:not(.el-table__row--striped):hover td.el-table__cell {
        background-color: #f8f9ff !important;
        background: #f8f9ff !important;
      }
    }
  }
}

// ==================== 全局固定列样式（放在 .el-table 外部，确保优先级） ====================
// 使用全局选择器，确保覆盖所有 Element Plus 默认样式
// 左侧固定列
.el-table__fixed {
  background-color: #ffffff !important;
  background: #ffffff !important;
  
  // 所有包装器
  .el-table__fixed-header-wrapper,
  .el-table__fixed-body-wrapper,
  .el-table__fixed-footer-wrapper {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  // 头部单元格
  .el-table__fixed-header-wrapper .el-table__header th.el-table__cell {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  // 主体单元格 - 普通行
  .el-table__fixed-body-wrapper .el-table__body tr td.el-table__cell {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  // 主体单元格 - hover 状态
  .el-table__fixed-body-wrapper .el-table__body tr:hover td.el-table__cell {
    background-color: #f8f9ff !important;
    background: #f8f9ff !important;
  }
  
  // 主体单元格 - 斑马纹行
  .el-table__fixed-body-wrapper .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: #fafbff !important;
    background: #fafbff !important;
  }
  
  // 主体单元格 - 斑马纹行 hover
  .el-table__fixed-body-wrapper .el-table__body tr.el-table__row--striped:hover td.el-table__cell {
    background-color: #f8f9ff !important;
    background: #f8f9ff !important;
  }
  
  // 底部单元格
  .el-table__fixed-footer-wrapper .el-table__footer td.el-table__cell {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
}

// 右侧固定列
.el-table__fixed-right {
  background-color: #ffffff !important;
  background: #ffffff !important;
  
  // 所有包装器
  .el-table__fixed-header-wrapper,
  .el-table__fixed-body-wrapper,
  .el-table__fixed-footer-wrapper {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  // 头部单元格
  .el-table__fixed-header-wrapper .el-table__header th.el-table__cell {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  // 主体单元格 - 普通行
  .el-table__fixed-body-wrapper .el-table__body tr td.el-table__cell {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
  
  // 主体单元格 - hover 状态
  .el-table__fixed-body-wrapper .el-table__body tr:hover td.el-table__cell {
    background-color: #f8f9ff !important;
    background: #f8f9ff !important;
  }
  
  // 主体单元格 - 斑马纹行
  .el-table__fixed-body-wrapper .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: #fafbff !important;
    background: #fafbff !important;
  }
  
  // 主体单元格 - 斑马纹行 hover
  .el-table__fixed-body-wrapper .el-table__body tr.el-table__row--striped:hover td.el-table__cell {
    background-color: #f8f9ff !important;
    background: #f8f9ff !important;
  }
  
  // 底部单元格
  .el-table__fixed-footer-wrapper .el-table__footer td.el-table__cell {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }
}

// 针对带斑马纹的表格，使用更具体的选择器覆盖 Element Plus 默认样式
.el-table.el-table--striped {
  .el-table__fixed .el-table__fixed-body-wrapper .el-table__body tr.el-table__row--striped td.el-table__cell,
  .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: #fafbff !important;
    background: #fafbff !important;
  }
  
  .el-table__fixed .el-table__fixed-body-wrapper .el-table__body tr.el-table__row--striped:hover td.el-table__cell,
  .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body tr.el-table__row--striped:hover td.el-table__cell {
    background-color: #f8f9ff !important;
    background: #f8f9ff !important;
  }
}

// ==================== 覆盖 Element Plus 固定列的 background: inherit ====================
// Element Plus 默认使用 background: inherit，导致固定列背景透明
// 使用通配符和属性选择器确保覆盖所有情况

// 使用通配符选择器，覆盖所有固定列相关的元素
[class*="el-table-fixed-column"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

// 固定列单元格 - 使用属性选择器
td.el-table-fixed-column-left,
td.el-table-fixed-column-right,
th.el-table-fixed-column-left,
th.el-table-fixed-column-right {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

// 固定列单元格 hover 状态
tr:hover td.el-table-fixed-column-left,
tr:hover td.el-table-fixed-column-right,
tr:hover th.el-table-fixed-column-left,
tr:hover th.el-table-fixed-column-right {
  background: #f8f9ff !important;
  background-color: #f8f9ff !important;
}

// 斑马纹行的固定列单元格
.el-table--striped tr.el-table__row--striped td.el-table-fixed-column-left,
.el-table--striped tr.el-table__row--striped td.el-table-fixed-column-right,
.el-table--striped tr.el-table__row--striped th.el-table-fixed-column-left,
.el-table--striped tr.el-table__row--striped th.el-table-fixed-column-right {
  background: #fafbff !important;
  background-color: #fafbff !important;
}

// 斑马纹行 hover 状态的固定列单元格
.el-table--striped tr.el-table__row--striped:hover td.el-table-fixed-column-left,
.el-table--striped tr.el-table__row--striped:hover td.el-table-fixed-column-right,
.el-table--striped tr.el-table__row--striped:hover th.el-table-fixed-column-left,
.el-table--striped tr.el-table__row--striped:hover th.el-table-fixed-column-right {
  background: #f8f9ff !important;
  background-color: #f8f9ff !important;
}

// 更具体的选择器，覆盖所有可能的组合
.el-table__body-wrapper tr td.el-table-fixed-column-left,
.el-table__body-wrapper tr td.el-table-fixed-column-right,
.el-table__body-wrapper tr th.el-table-fixed-column-left,
.el-table__body-wrapper tr th.el-table-fixed-column-right,
.el-table__footer-wrapper tr td.el-table-fixed-column-left,
.el-table__footer-wrapper tr td.el-table-fixed-column-right,
.el-table__footer-wrapper tr th.el-table-fixed-column-left,
.el-table__footer-wrapper tr th.el-table-fixed-column-right,
.el-table__header-wrapper tr td.el-table-fixed-column-left,
.el-table__header-wrapper tr td.el-table-fixed-column-right,
.el-table__header-wrapper tr th.el-table-fixed-column-left,
.el-table__header-wrapper tr th.el-table-fixed-column-right {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

// 菜单样式：更柔和的激活和悬停效果
.el-menu {
  .el-menu-item {
    border-radius: 6px;
    margin: 4px 8px;
    transition: all 0.2s ease;
    
    &:hover {
      background-color: rgba(99, 102, 241, 0.08);
    }
    
    &.is-active {
      background-color: rgba(99, 102, 241, 0.12);
      color: var(--el-color-primary);
    }
  }
}

// 对话框样式：更柔和的动画和圆角
.el-dialog {
  border-radius: 16px;
  overflow: hidden;
  
  .el-dialog__header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.02) 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  }
}

// 消息提示样式：更柔和的背景和边框
.el-message {
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: var(--el-box-shadow-light);
}

// 通知样式：更柔和的圆角和阴影
.el-notification {
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

// 分页样式：更柔和的按钮样式
.el-pagination {
  .el-pager li {
    border-radius: 6px;
    transition: all 0.2s ease;
    
    &:hover {
      background-color: rgba(99, 102, 241, 0.1);
    }
    
    &.is-active {
      background-color: var(--el-color-primary);
      color: #ffffff;
    }
  }
  
  .btn-prev,
  .btn-next {
    border-radius: 6px;
    transition: all 0.2s ease;
    
    &:hover {
      background-color: rgba(99, 102, 241, 0.1);
    }
  }
}

// 选择器下拉框：更柔和的样式
.el-select-dropdown {
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  
  .el-select-dropdown__item {
    border-radius: 4px;
    margin: 2px 8px;
    transition: all 0.2s ease;
    
    &:hover {
      background-color: rgba(99, 102, 241, 0.08);
    }
    
    &.selected {
      background-color: rgba(99, 102, 241, 0.12);
      color: var(--el-color-primary);
    }
  }
}

// 步骤条样式：更柔和的连接线和激活状态
.el-steps {
  .el-step__head.is-process {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }
  
  .el-step__title.is-process {
    color: var(--el-color-primary);
  }
  
  .el-step__line {
    background-color: rgba(99, 102, 241, 0.2);
  }
}

// 时间选择器样式：更柔和的边框
.el-time-picker {
  .el-input__wrapper {
    border-radius: 8px;
  }
}

// 日期选择器样式：更柔和的激活状态
.el-date-editor {
  .el-input__wrapper {
    border-radius: 8px;
  }
}

// ==================== 对话框动画 ====================

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes dialogBackdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

// 应用对话框动画
.el-overlay {
  animation: dialogBackdropFadeIn 0.3s ease-out;
  
  .el-dialog {
    animation: dialogFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

// ==================== 小清新风格工具类 ====================

// 柔和的渐变背景
.gradient-primary {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

// 柔和的阴影效果
.shadow-soft {
  box-shadow: 0 4px 16px -4px rgba(99, 102, 241, 0.1),
              0 2px 8px -2px rgba(99, 102, 241, 0.06);
}

// 柔和的边框
.border-soft {
  border: 1px solid rgba(99, 102, 241, 0.15);
}

// 柔和的背景
.bg-soft {
  background-color: rgba(99, 102, 241, 0.05);
}

// ==================== 最高优先级：强制覆盖固定列背景色 ====================
// 放在文件末尾，确保最高优先级
// 使用最通用的选择器，覆盖所有可能的固定列元素

// 通配符选择器 - 覆盖所有包含 fixed-column 的类
*[class*="fixed-column"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

// 固定列单元格 - 所有可能的组合
td[class*="fixed-column"],
th[class*="fixed-column"],
.el-table__cell[class*="fixed-column"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

// hover 状态
tr:hover td[class*="fixed-column"],
tr:hover th[class*="fixed-column"],
tr:hover .el-table__cell[class*="fixed-column"] {
  background: #f8f9ff !important;
  background-color: #f8f9ff !important;
}

// 斑马纹行
.el-table--striped tr.el-table__row--striped td[class*="fixed-column"],
.el-table--striped tr.el-table__row--striped th[class*="fixed-column"],
.el-table--striped tr.el-table__row--striped .el-table__cell[class*="fixed-column"] {
  background: #fafbff !important;
  background-color: #fafbff !important;
}

// 斑马纹行 hover
.el-table--striped tr.el-table__row--striped:hover td[class*="fixed-column"],
.el-table--striped tr.el-table__row--striped:hover th[class*="fixed-column"],
.el-table--striped tr.el-table__row--striped:hover .el-table__cell[class*="fixed-column"] {
  background: #f8f9ff !important;
  background-color: #f8f9ff !important;
}